<template>
  <div class="goodList">
    <HeadInfo></HeadInfo>
    <List
      :columns="columns"
      :data="data"
      :loading="loading"
      @classifyDelete="classifyDelete"
      @update="update"
    ></List>
  </div>
</template>

<script>
import List from '@/pages/components/list/list';
import HeadInfo from '@/pages/components/detail/HeadInfo';
import { mapState } from 'vuex';
import {
  goodsClassify,
  deleteClassify,
  updateClassify,
  addClassify,
} from '@/services/shopApi/dataSource';
import moment from 'moment';
const columns = [
  {
    title: '分类ID',
    dataIndex: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '分类排序',
    className: 'column-money',
    dataIndex: 'sort',
    sorter: (a, b) => a.sort - b.sort,
  },
  {
    title: '添加时间',
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];
export default {
  name: 'classify',
  components: { List, HeadInfo },
  data() {
    return {
      columns,
      data: [],
      loading: false,
      desc: '先为商品添加分类,才能更好的归类商品~',
      extraImage:
        'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
    };
  },
  computed: {
    ...mapState('account', ['user']),
  },
  methods: {
    getGoodsClassify() {
      goodsClassify()
        .then((res) => {
          const data = res.result;
          // 序列化时间
          this.formatTime(data);
          this.data = data;
          sessionStorage.setItem('classifyList', JSON.stringify(data));
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    async classifyDelete(id) {
      try {
        const res = await deleteClassify(id);
        this.$message.success(res.msg);
        this.getGoodsClassify();
      } catch (error) {
        this.$message.error(error.msg);
      }
    },
    update(flag, params) {
      if (flag === 1) {
        updateClassify(params)
          .then((res) => {
            this.$message.success(res.msg);
            this.getGoodsClassify();
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      } else if (flag === 2) {
        addClassify(params)
          .then((res) => {
            this.$message.success(res.msg);
            this.getGoodsClassify();
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      } else {
        this.getGoodsClassify();
      }
    },
    // 递归格式化时间
    formatTime(arr) {
      arr.filter((ele) => {
        ele.createdAt = moment(ele.createdAt).format('YYYY-MM-DD  HH:mm:ss');
        if (ele.children instanceof Array && ele.children.length > 0)
          this.formatTime(ele.children);
        return ele.createdAt;
      });
    },
  },
  created() {
    //放入缓存减少请求量
    this.loading = true;
    if (sessionStorage.getItem('classifyList')) {
      this.data = JSON.parse(sessionStorage.getItem('classifyList'));
      this.loading = false;
    } else {
      this.getGoodsClassify();
    }
  },
};
</script>

<style></style>
